<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" ref="zujian"/>
    <h1 ref="title"></h1>
    <div class="light" style="margin-left:200px"><i class="el-icon-star-off"></i></div>
    <el-button @click="_c_chou" class="animate__animated animate__swing">抽奖</el-button>
    <button @click="_c_add">新增</button>
    <button @click="_c_edit">修改</button>
    <button @click="_c_delete">删除</button> -->
    <div id="menu">
      <router-link to="/news">菜单1</router-link>
      <router-link to="/message">菜单2</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src
import 'animate.css';
import HelloWorld from '@/components/HelloWorld.vue'
import {getUserInfo,login} from '@/axios/api/user.js'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  mounted(){
    this.$bus.$on('hello',(data)=>{
      console.log('我是组件，收到了'+ data);
    })
  },
  methods:{
    // _c_chou(){
    //   // setTimeout(() => {
    //   //   let n = this.rand(1,100);
    //   //   if(n <= 30){
    //   //     alert('恭喜，500万大奖就是您的！')
    //   //   }else{
    //   //     alert('再接再厉！')
    //   //   }
    //   // }, 2000);

      
    //   //promise对象可以包裹一个异步操作
    //   // const p = new Promise((res,rej)=>{
    //   //   setTimeout(() => {
    //   //     let n = this.rand(1,100);
    //   //     if(n <= 30){
    //   //       res(n)//将promise对象p的状态设置为成功
    //   //     }else{
    //   //       rej(n)//将promise对象p的状态设置为失败
    //   //     }
    //   //   }, 1000);
    //   // })
    //   //调用then方法指定成功失败的回调函数
    //   // p.then((value)=>{
    //   //   alert('恭喜，500万大奖就是您的！,您的中奖号码是'+ value)//promise对象p状态为成功走这里
    //   // },(reason)=>{
    //   //   alert('再接再厉！您的号码是'+reason)//promise对象p状态为失败走这里
    //   // })

    //   // const p = new Promise((res,rej)=>{
    //   //   //创建对象
    //   //   const xhr = new XMLHttpRequest();
    //   //   //初始化
    //   //   xhr.open('GET','https://api.apiopen.top/getJoke');
    //   //   //发送
    //   //   xhr.send();
    //   //   //处理响应结果
    //   //   xhr.onreadystatechange = function(){
    //   //     if(xhr.readyState === 4){
    //   //       if(xhr.status >= 200 && xhr.status < 300){
    //   //         res(xhr.response)
    //   //       }else{
    //   //         rej(xhr.status)
    //   //       }
    //   //     }
    //   //   }
    //   // });
    //   // p.then(value=>{
    //   //   console.log(value);
    //   // },reason=>{
    //   //   console.log(reason);
    //   // })

    //   // let p1 = Promise.resolve(521);
    //   // //如果传入的参数为非promise类型的对象，返回的结果为成功promise对象
    //   // //如果传入的参数为promise对象，那么参数的结果决定了resolve的结果
    //   // let p2 = Promise.resolve(new Promise((resolve,reject)=>{
    //   //   reject('error')
    //   // }))
    //   // console.log(p1);
    //   // console.log(p2);

    //   // let p1 = new Promise((res,rej)=>{
    //   //   res('ok')
    //   // });
    //   // let p2 = Promise.resolve('success');
    //   // let p3 = Promise.resolve('on yes')
    //   // let p = Promise.all([p1,p2,p3]);
    //   // console.log(p);

    //   // let p1 = new Promise((res,rej)=>{
    //   //   rej('ok')//res('ok')
    //   // });
    //   // let p2 = Promise.resolve('success');
    //   // let p3 = Promise.resolve('on yes')
    //   // let p = Promise.race([p1,p2,p3]);
    //   // console.log(p);

    //   // let p = new Promise((res,rej)=>{
    //   //   setTimeout(() => {
    //   //     res('ok')
    //   //   }, 1000);
    //   // })
    //   // p.then(value=>{
    //   //   return new Promise((res,rej)=>{
    //   //     res('success')
    //   //   })
    //   //   // throw '失败啦'
    //   //   // return new Promise(()=>{})
    //   // }).then(value =>{
    //   //   console.log(value);
    //   // }).then(value =>{
    //   //   console.log(value);
    //   // }).catch((reason)=>{
    //   //   console.log(reason);
    //   // })
    //   // let p = new Promise((res,rej)=>{
    //   //   res('ok')
    //   // })
    //   // p.then(value =>{
    //   //   console.log(value);
    //   // },reason =>{
    //   //   console.log(reason);
    //   // })
    //   // let result = this.main();
    //   // console.log(result);
    //   // let params = {
    //   //   menuId:11
    //   // }
    //   // const data =  getUserInfo(params)
    //   // console.log(data);
    //   // this._c_get_login()
    //   console.log(this.$refs.title);
    //   console.log(this.$refs.zujian);
    // },
    // _c_get_login(){
    //   let params = {
    //     email:'1234',
    //     password:'12321'
    //   }
    //   const data = login(params)
    //   console.log(data);
    // },
    // async main(){
    //   //如果返回值是一个非promise类型的数据，成功的结果就是该数据
    //   // return 521
    //   //如果返回值是一个promise对象，成功/失败的结果就是该promise对象返回的结果
    //   // return new Promise((res,rej)=>{
    //   //   res('ok')
    //   // })
    //   //如果抛出异常，那么就是失败的结果，结果值为抛出的数据
    //   // throw 'on no'
      
    //   // //右侧是promise对象，则结果为promise对象返回的结果
    //   // let p = new Promise((res,rej)=>{
    //   //   // res('ok')
    //   //   rej('error')
    //   // });
    //   // // let res = await p;
    //   // // console.log(res);
    //   // //右侧为其他类型的数据,右侧是什么就返回什么
    //   // let res2 = await 20;
    //   // console.log(res2);
    //   // //如果promise是失败的状态
      
    //   // // console.log(res3);
    //   // try {
    //   //   let res3 = await p;
    //   // } catch (error) {
    //   //   console.log(error);
    //   // }
    // },
    // rand(m,n){
    //   return Math.ceil(Math.random()*(n-m+1))+m-1
    // },
    // _c_add(){
    //   this.setCookie(title,22,3)
    //   let obj = {name:'zhangdan',id:2};
    //   sessionStorage.setItem('user',JSON.stringify(obj))
    // },
    // setCookie(name, value, day) {
    //     var date = new Date();
    //     date.setDate(date.getDate() + day);
    //     document.cookie = name + '=' + value + ';expires=' + date;
    // },
    // _c_edit(){
    //   console.log(JSON.parse(sessionStorage.getItem('user')))
    // },
    // _c_delete(){
    //   this.$emit('hello',777)
    // }
  }
}
</script>

<style lang="scss" scoped>
  .home{
    width: 100%;
    height: 100%;
    // $radius:28px;
    // .light{
    //   background: radial-gradient($radius,#ffee00,transparent);
    //   animation:light .5s infinite;
    //   width:20px
    // }
    // @keyframes light {
    //   0%{
    //     background: radial-gradient($radius,#ffee00,transparent);
    //   }
    //   15%{
    //     background: radial-gradient($radius,#ffee00a6,transparent);
    //   }
    //   25%{
    //     background: radial-gradient($radius,#ffee0049,transparent);
    //   }
    //   50%{
    //     background: transparent;
    //   }
    //   65%{
    //     background: radial-gradient($radius,#ffee0049,transparent);
    //   }
    //   75%{
    //     background: radial-gradient($radius,#ffee00a6,transparent);
    //   }
    //   100%{
    //     background: radial-gradient($radius,#ffee00,transparent);
    //   }
    // }
  }
</style>
